<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>点消棋子魔改版-尘疯</title>
  </head>
  <body>
    <div class="chessboard"></div>
    <div class="fallbackBtn">回退一步</div>
    <script>
      const record = []
      let step = -1
      const chess = new Array(15).fill(0).map(() => new Array(15).fill(false))
      chess[0][0] = true
      chess[0][1] = true
      chess[1][0] = true
      const chessboard = document.querySelector('.chessboard')
      const fallbackBtn = document.querySelector('.fallbackBtn')
      const renderChessBoard = () => {
        chessboard.innerHTML = ''
        for (let i = 0; i < chess.length; i++) {
          for (let j = 0; j < chess[0].length; j++) {
            const grid = document.createElement('div')
            grid.setAttribute('data-x', i)
            grid.setAttribute('data-y', j)
            grid.className = 'grid'
            if (chess[i][j]) {
              grid.className = grid.className + ' coin'
            }
            chessboard.append(grid)
          }
        }
      }
      const calDropable = (x, y) => {
        if (x > 1 && y > 1) {
          return !chess[x + 1][y] && !chess[x][y + 1] && chess[x][y]
        } else if (x > 1) {
          return !chess[x + 1][y]
        } else if (y > 1) {
          return !chess[x][y + 1]
        } else {
          return true
        }
      }
      const updateChess = (x, y) => {
        record[++step] = [x, y]
        chess[x][y] = false
        if (x > 1) {
          chess[x + 1][y] = true
        }
        if (y > 1) {
          chess[x][y + 1] = true
        }
        renderChessBoard()
      }
      const fallback = (x, y) => {
        if (step === -1) {
          alert('褰撳墠鏃犳硶鍥為€€')
          return
        }
        const [pathX, pathY] = record[step--]
        chess[pathX][pathY] = true
        if (pathX > 1) {
          chess[pathX + 1][pathY] = false
        }
        if (pathY > 1) {
          chess[pathX][pathY + 1] = false
        }
        renderChessBoard()
      }
      chessboard.addEventListener('click', (e) => {
        const tar = e.target
        const x = +tar.getAttribute('data-x')
        const y = +tar.getAttribute('data-y')
        if (!chess[x][y]) return // 右侧或下方有其他硬币时，无法操作
        if (calDropable(x, y)) {
          tar.className = 'grid'
          updateChess(x, y)
        } else {
          alert('右侧或下方有其他硬币时，无法操作')
        }
      })
      fallbackBtn.addEventListener('click', fallback)
      renderChessBoard()
    </script>
  </body>
  <style>
    .chessboard {
      width: 600px;
      height: 600px;
      display: grid;
      grid-template-columns: repeat(15, 40px);
      grid-template-rows: repeat(15, 40px);
      border: 1px solid gray;
    }
    .fallbackBtn {
      height: 24px;
      width: 90px;
      margin: 15px;
      padding: 5px;
      text-align: center;
      font-size: 16px;
      border: 1px solid black;
      border-radius: 4px;
      cursor: pointer;
    }
    .grid {
      width: 40px;
      height: 40px;
      border: 1px solid gray;
    }
    .coin {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .coin::after {
      display: block;
      content: '';
      width: 26px;
      height: 26px;
      border-radius: 13px;
      background-color: black;
    }
  </style>
</html>
